<div class="content-heading">Sortable</div>
<h4>Simple sortable</h4>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                Favorite drinks
            </div>
            <div class="panel-body">
                <ul class="list-group" dnd-sortable-container [sortableData]="listOne">
                    <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                My prefences:
                <br/>
                <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>
            </div>
        </div>
    </div>
</div>
<h4>Multi list sortable</h4>
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-warning">
            <div class="panel-heading">
                Available boxers
            </div>
            <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listBoxers">
                <ul class="list-group">
                    <li *ngFor="let item of listBoxers; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                First Team
            </div>
            <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamOne">
                <ul class="list-group">
                    <li *ngFor="let item of listTeamOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-info">
            <div class="panel-heading">
                Second Team
            </div>
            <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamTwo">
                <ul class="list-group">
                    <li *ngFor="let item of listTeamTwo; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div>
    <h4>
        Drag-and-Drop - Shopping basket
    </h4>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-success">
                <div class="panel-heading">Available products</div>
                <div class="panel-body">
                    <div *ngFor="let product of availableProducts" class="panel panel-default" dnd-draggable [dragEnabled]="product.quantity>0" [dragData]="product" (onDragSuccess)="orderedProduct($event)" [dropZones]="['demo1']">
                        <div class="panel-body">
                            <div [hidden]="product.quantity===0">{{product.name}} - ${{product.cost}}
                                <br>(available: {{product.quantity}})</div>
                            <div [hidden]="product.quantity>0">
                                <del>{{product.name}}</del>
                                <br>(NOT available)</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div dnd-droppable (onDropSuccess)="addToBasket($event)" [dropZones]="['demo1']" class="panel panel-info">
                <div class="panel-heading">Shopping Basket
                    <div class="pull-right">
                        <button class="btn btn-default btn-sm" (click)="resetBasket()"><em class="fa fa-trash-o"></em></button>
                    </div>
                    <br>(to pay: ${{ totalCost() }})</div>
                <div class="panel-body">
                    <p [hidden]="!shoppingBasket.length">Drag some items here..</p>
                    <div *ngFor="let product of shoppingBasket" class="panel panel-default">
                        <div class="panel-body">
                            {{product.name}}
                            <br>(ordered: {{product.quantity}}
                            <br>cost: ${{product.cost * product.quantity}})
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
